<template>
  <div class="rellax-demo">
    <BoRellax class="demo">
      <div class="view">
        <h2
          style="padding-left: 200px; font-size: 100px; color: #c1c1c1;"
        >Good San Francisco California</h2>
        <div>
          <BoRellaxItem class="block-2" speed="-3" />
          <BoRellaxItem class="block-2" speed="-3" />
          <BoRellaxItem class="block-2" speed="-3" />
          <BoRellaxItem class="block-2" speed="-3" />
          <BoRellaxItem class="block-2" speed="-3" />
          <BoRellaxItem class="block-2" speed="-3" />
        </div>
        <div>
          <BoRellaxItem class="block" speed="7" />
          <BoRellaxItem class="block" speed="7" />
          <BoRellaxItem class="block" speed="7" />
          <BoRellaxItem class="block" speed="7" />
          <BoRellaxItem class="block" speed="7" />
          <BoRellaxItem class="block" speed="7" />
        </div>
      </div>
    </BoRellax>
  </div>
</template>

<style>
.demo {
  margin: 100px auto 0;
}
.view {
  height: 500px;
  width: 3000px;
}
.block {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background-color: #5000f1;
  position: absolute;
  bottom: 100px;
  left: 200px;
  /* transition: transform 0.05s; */
}
.block-2 {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  position: absolute;
  bottom: 300px;
  left: 200px;
  background-color: #00f1c9;
}

.block:nth-child(2) { left: 400px; }
.block:nth-child(3) { left: 600px; }
.block:nth-child(4) { left: calc(4 * 200px); }
.block:nth-child(5) { left: calc(5 * 200px); }
.block:nth-child(6) { left: calc(6 * 200px); }
.block:nth-child(7) { left: calc(7 * 200px); }
.block:nth-child(8) { left: calc(8 * 200px); }
.block:nth-child(9) { left: calc(9 * 200px); }

.block-2:nth-child(2) { left: 400px; }
.block-2:nth-child(3) { left: 600px; }
.block-2:nth-child(4) { left: calc(4 * 200px); }
.block-2:nth-child(5) { left: calc(5 * 200px); }
.block-2:nth-child(6) { left: calc(6 * 200px); }
.block-2:nth-child(7) { left: calc(7 * 200px); }
.block-2:nth-child(8) { left: calc(8 * 200px); }
.block-2:nth-child(9) { left: calc(9 * 200px); }
</style>